<template>
  <a-modal v-model:visible="visible" title="菜单编辑" :width="700" @ok="save">
    <a-form
      layout="Vertical"
      :model="formState"
      ref="formRef"
      :labelCol="{ style: { width: '120px' } }"
      :rules="rules"
    >
      <a-form-item label="父级菜单" required v-if="data.isChild">
        <a-input disabled v-model:value="data.parentName" />
      </a-form-item>
      <a-form-item label="菜单名称(中文)" required>
        <a-input
          v-model:value="formState.menuName"
          :maxlength="50"
          placeholder="请输入菜单名称"
        />
      </a-form-item>
      <a-form-item label="菜单类型" required>
        <a-select
          :disabled="formState.id != ''"
          :options="menuTypeOptions"
          v-model:value="formState.menuType"
          placeholder="请选择菜单类型"
        />
      </a-form-item>
      <a-form-item label="权限标识" required>
        <a-input
          v-model:value="formState.perms"
          :maxlength="50"
          placeholder="请输入权限标识"
        />
      </a-form-item>
      <!-- <a-form-item label="组件图标" required>
        <a-input v-model:value="formState.icon" placeholder="请输入期数" />
      </a-form-item> -->
      <a-form-item label="路由地址" required>
        <a-input
          v-model:value="formState.path"
          :maxlength="50"
          placeholder="请输入路由地址"
        />
      </a-form-item>
      <a-form-item label="显示顺序" required>
        <a-input
          v-model:value="formState.orderNum"
          :maxlength="50"
          placeholder="请输入显示顺序"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { postMenuAdd, postMenuUpdate } from "@/api/system";
import { useEditModal } from "@/hooks/useEditModal";
import { message } from "ant-design-vue";
import { menuTypeOptions } from "@/views/constant";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const formData = reactive({
  id: "",
  orderNum: "",
  // parentId: 0,
  menuName: "",
  menuType: undefined,
  perms: "",
  path: "",
});
const rules = {
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "change" }],
  menuType: [{ required: true, message: "请选择菜单类型", trigger: "change" }],
  perms: [{ required: true, message: "请输入菜单权限", trigger: "change" }],
  orderNum: [{ required: true, message: "请输入显示顺序", trigger: "change" }],
  path: [{ required: true, message: "请输入菜单路由", trigger: "change" }],
};
const { visible, formRef, formState } = useEditModal(props, formData);
const emits = defineEmits(["ok"]);
const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postMenuUpdate : postMenuAdd;
    const { isChild, parentId } = props.data;
    const params = {
      isFrame: false,
      parentId: 0,
    };
    if (isChild) {
      params.parentId = parentId;
    }
    console.log("params", params);
    console.log("{ ...params, ...formState }", { ...params, ...formState });
    requestUrl({ ...params, ...formState }).then((res) => {
      message.success("操作成功");
      visible.value = false;
      emits("ok");
    });
  });
};
defineExpose({
  visible,
});
</script>

<style lang="less" scoped>
.list-box {
  display: flex;
  border: 1px solid #ececec;
  .list {
    width: 20%;
    &:not(:last-child) {
      border-right: 1px solid #ececec;
    }
  }
  .date,
  .count-list {
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-bottom: 1px solid #ececec;
  }
}
</style>
